<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="renderer" content="webkit">
    <title>select、radio 、checkbox常见操作</title>
</head>
<body>
    <select class="select">
        <option value="select" selected="selected">下拉框</option>
        <option value="radio">单选框</option>
        <option value="checkbox">多选框</option>
    </select>
    <div class="container">
        <input class="radio" name="programinglanguage" type="radio" value="java" />java
        <input class="radio" name="programinglanguage" type="radio" value="php" />php
        <input class="radio" name="programinglanguage" type="radio" checked="checked"  value=".net" />.net
        <input class="radio" name="programinglanguage" type="radio" value="c++" />c++
    </div>
    <div class="container">
        <input class="checkbox" name="frontEnd" type="checkbox" checked="checked" value="react" />react
        <input class="checkbox" name="frontEnd" type="checkbox" value="vue" />vue
        <input class="checkbox" name="frontEnd" type="checkbox" value="javascript" />javascript
        <input class="checkbox" name="frontEnd" type="checkbox" value="sass" />sass
        <input class="checkbox" name="frontEnd" type="checkbox" value="less" />less
    </div>
    <script type="text/javascript">
        window.onload = function(){
            /**
             * select常见操作
             */
            var selectObj  = document.querySelector('.select');
            var index = selectObj.selectedIndex;
            /**
             * 获取选中value值
             * 第一种通过select对象.value获取
             * 第二种通过select选中的下标来获取value获取
             */
            var selectValue = selectObj.value;
            var selectValue_2 = selectObj.options[index].value;
            /**
             * 获取选中文本值
             * 通过select选中的下标来获取选中文本值
             */
            var selectText = selectObj.options[index].text;
            /**
             * 设置select选中项
             * 知道options的value值或者下标或者文本值
             * 下面代码只列出根据value来选中select
             */
            var setSelect = 'radio';
            var selectOptions = selectObj.options;//获取select下所有的option
            for(var i = 0;i < selectOptions.length;i++){
                //selectOptions[i].text 获取文本值
                if(selectOptions[i].value == setSelect){
                    selectObj[i].setAttribute('selected','selected');
                    break;
                }
            }
            /**
             * 添加option
             * 格式：new Option('text(文本值)','value(value值)');
             */
            selectObj.add(new Option('单行文本输入框','text'));
            /**
             * 删除option
             * 思路：删除option需要获得要删除option的下标，可通过循环判断出塞选出想要的option
             * 注意：如果select没有找到要删除option的下标，select将保持不变，控制台不会报错

             */
            var deleteIndex = 0;
            selectObj.options.remove(deleteIndex);
            /**
             * 修改option
             * 思路：修改option需要获得要修改option的下标
             * 注意：如果要修改的updateIndex大于select的option长度，就会出现空的option
             * 缺点：和删除option一起用会保留空的option
             */
            var updateIndex = 2;
            selectObj.options[updateIndex]=new Option('多行行文本输入框','textarea');
            /**
             * radio常见操作
             * document.querySelectorAll('.class、#id')与document.getElementsByName('name值')能达到一样的效果，代码将用前者造轮子
             * 缺点：操作需要循环去定位然后在操作
             *
             */
            var radioObj = document.querySelectorAll('.radio');
            for(var i = 0;i < radioObj.length;i++){
                if(radioObj[i].checked == true){
                    console.log(radioObj[i].value);//获取选中的值
                    radioObj[i].checked = false;//设置取消选中
                }else{
//                    radioObj[i].checked = true;//设置选中
                }
            }
            /**
             * checkbox常见操作
             * document.querySelectorAll('.class、#id')与document.getElementsByName('name值')能达到一样的效果，代码将用前者造轮子
             * 缺点：操作需要循环去定位然后在操作
             * checkbox常见操作与radio常见操作都一样
             */
            var checkboxObj = document.querySelectorAll('.checkbox');
            for(var i = 0;i < checkboxObj.length;i++){
                if(checkboxObj[i].checked == true){
                    console.log(checkboxObj[i].value);//获取选中的值
                    checkboxObj[i].checked = false;//设置取消选中
                }else{
                    checkboxObj[i].checked = true;//设置选中
                }
            }
        }
    </script>
</body>
</html>